웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바스크립트를 사용하여 만약 파일의 확장자(이미지라면 jpg, gif, png를 말합니다) 값만 불러오게 하려면 어떻게 해야할까요? 아래에서 알아봅니다.
생각할 수 있는 방법 중 가장 쉬운 방법은 바로 정규표현식을 사용하는 방법입니다. 확장자는 모두 .(마침표)을 기준으로 나뉠 수 있기 때문에 만약 파일에서 period인 . 기호가 한 개인 경우라면 정규표현식 사용 하지 않고도 split() 함수를 사용할 수도 있겠습니다. 하지만 .의 개수을 알 수 없다면 다른 방법을 찾아야죠.
만약 아래와 같이 test 변수가 존재하고 값이 imagefile.jpg 라는 값을 가지는 경우를 생각해봅니다. 여기서는 정규표현식을 사용하는 방법을 알아보도록 하겠습니다. 정규표현식은 정규식 패턴과 매칭되는 문자열을 검색하거나 변경하는데 매우 유용하게 사용됩니다. 먼저 아래의 예제를 봐주세요.
이제 변수 ext의 값은 아래와 같이 'jpg'만 출력하게 됩니다. 즉 우리가 원했던 결과가 나타났습니다.
위 과정을 간략하게 설명하려고 합니다. 먼저 test 변수에 정규표현식을 사용하였습니다. 정규표현식 패턴에는 사용될 용어 및 연산자가 포함되는데 여기서 사용된 w와 + 등은 다음과 같습니다.
w : 숫자와 알파벳(대소문자 구분없이)을 의미함
+ : 최소 한번에서 다수의 반복을 의미
즉, 위 기호는 숫자 및 알파벳이 계속되서 반복되는 범위를 의미하며 이를 없애도록 replace()의 두번째 매개변수에 '' ... 공백을 사용해 삭제하도록 하였습니니다. 추가로 - 기호는 위 정규식만으로는 제거할 수 없어 - 기호를 추가하였습니다. 출력되는 값은 jpg입니다.
@ 파일에 특수문자가 포함된 경우
만약 파일에 특수문자가 포함되었다면 해당 부분이 정규식에 추가되어야 합니다. 즉 아래의 경우 /, -, _ 특수문자를 포함한 정규표현식 패턴으로 변경하였습니다.
확장자 뿐만 아니라 확장자를 제외한 파일이름 역시 필요하다면? 이 경우 확장자를 정규표현식을 사용해 지울 경우 파일 이름만 가져올 수 있을 것입니다.
이제 변수 nameOnly는 확장자를 제외한 파일이름만 가지게 됩니다.
! split() 함수를 사용하여 확장자만 가져오는 방법
이번에는 split() 함수를 사용하는 방법입니다. split() 특정 구분자를 기준으로 배열로 반환합니다. 확장자를 가져와야 하므로 . 기호를 기준으로 split() 함수를 사용할 경우 반환되는 배열의 두 번째 값은 jpg가 될 것입니다. 아래 예제를 참고하세요.
보시는 것처럼 첫 번째 방법보다 간단합니다. 문제는 . 기호가 여러 개인 경우입니다. 만약 . 기호가 하나가 아니라 두개라면 어떻게 해야할까요... 아래의 예제를 보세요.
달라진 건 크게 없습니다. 단지 배열값에 저장돤 마지막 값을 사용하면 됩니다. 마지막 배열값은 전체 개수에서 -1의 값을 불러오면 됩니다. 즉 [test.length - 1]을 인덱스 값으로 사용하여 간단하게 해결하였습니다.
여기까지 파일의 확장자만 가져올 수 있는 방법을 알아보았습니다.
# 자바스크립트 파일 이름의 확장자만 가져오기
생각할 수 있는 방법 중 가장 쉬운 방법은 바로 정규표현식을 사용하는 방법입니다. 확장자는 모두 .(마침표)을 기준으로 나뉠 수 있기 때문에 만약 파일에서 period인 . 기호가 한 개인 경우라면 정규표현식 사용 하지 않고도 split() 함수를 사용할 수도 있겠습니다. 하지만 .의 개수을 알 수 없다면 다른 방법을 찾아야죠.
! 정규표현식으로 파일 확장자만 가져오는 방법
만약 아래와 같이 test 변수가 존재하고 값이 imagefile.jpg 라는 값을 가지는 경우를 생각해봅니다. 여기서는 정규표현식을 사용하는 방법을 알아보도록 하겠습니다. 정규표현식은 정규식 패턴과 매칭되는 문자열을 검색하거나 변경하는데 매우 유용하게 사용됩니다. 먼저 아래의 예제를 봐주세요.
let test = 'image-file_200802.jpg';
let pattern = /(\w|-)+./;
// 찾을 문자 패턴을 입력
let ext = test.replace(pattern, '');
// replace함수와 정규표현식을 사용해 확장자가 아닌 부분을 삭제
let pattern = /(\w|-)+./;
// 찾을 문자 패턴을 입력
let ext = test.replace(pattern, '');
// replace함수와 정규표현식을 사용해 확장자가 아닌 부분을 삭제
이제 변수 ext의 값은 아래와 같이 'jpg'만 출력하게 됩니다. 즉 우리가 원했던 결과가 나타났습니다.
jpg // 확장자만 출력함
위 과정을 간략하게 설명하려고 합니다. 먼저 test 변수에 정규표현식을 사용하였습니다. 정규표현식 패턴에는 사용될 용어 및 연산자가 포함되는데 여기서 사용된 w와 + 등은 다음과 같습니다.
w : 숫자와 알파벳(대소문자 구분없이)을 의미함
+ : 최소 한번에서 다수의 반복을 의미
즉, 위 기호는 숫자 및 알파벳이 계속되서 반복되는 범위를 의미하며 이를 없애도록 replace()의 두번째 매개변수에 '' ... 공백을 사용해 삭제하도록 하였습니니다. 추가로 - 기호는 위 정규식만으로는 제거할 수 없어 - 기호를 추가하였습니다. 출력되는 값은 jpg입니다.
@ 파일에 특수문자가 포함된 경우
만약 파일에 특수문자가 포함되었다면 해당 부분이 정규식에 추가되어야 합니다. 즉 아래의 경우 /, -, _ 특수문자를 포함한 정규표현식 패턴으로 변경하였습니다.
// 기존
let pattern = /(\w|-)+./;
// 변경 후
let pattern = /(\w|-|_|\/)+./;
let pattern = /(\w|-)+./;
// 변경 후
let pattern = /(\w|-|_|\/)+./;
확장자 뿐만 아니라 확장자를 제외한 파일이름 역시 필요하다면? 이 경우 확장자를 정규표현식을 사용해 지울 경우 파일 이름만 가져올 수 있을 것입니다.
const patternExt = /(\w|-)+./;
let ext = test.replace(patternExt, '');
// 파일 이름을 얻기 정규식으로 얻기
const patternName = new RegExp('.' + ext + '$');
let nameOnly = filename.replace(patternName, '');
let ext = test.replace(patternExt, '');
// 파일 이름을 얻기 정규식으로 얻기
const patternName = new RegExp('.' + ext + '$');
let nameOnly = filename.replace(patternName, '');
이제 변수 nameOnly는 확장자를 제외한 파일이름만 가지게 됩니다.
! split() 함수를 사용하여 확장자만 가져오는 방법
이번에는 split() 함수를 사용하는 방법입니다. split() 특정 구분자를 기준으로 배열로 반환합니다. 확장자를 가져와야 하므로 . 기호를 기준으로 split() 함수를 사용할 경우 반환되는 배열의 두 번째 값은 jpg가 될 것입니다. 아래 예제를 참고하세요.
var test = 'imagefile.jpg';
test = test.split('.');
alert(test[1]);
// jpg를 출력
test = test.split('.');
alert(test[1]);
// jpg를 출력
보시는 것처럼 첫 번째 방법보다 간단합니다. 문제는 . 기호가 여러 개인 경우입니다. 만약 . 기호가 하나가 아니라 두개라면 어떻게 해야할까요... 아래의 예제를 보세요.
var test = 'imagefile.test.jpg';
test = test.split('.');
alert(test[test.length-1]);
// jpg를 출력
test = test.split('.');
alert(test[test.length-1]);
// jpg를 출력
달라진 건 크게 없습니다. 단지 배열값에 저장돤 마지막 값을 사용하면 됩니다. 마지막 배열값은 전체 개수에서 -1의 값을 불러오면 됩니다. 즉 [test.length - 1]을 인덱스 값으로 사용하여 간단하게 해결하였습니다.
여기까지 파일의 확장자만 가져올 수 있는 방법을 알아보았습니다.
아래의 글도 찾고 계시지 않나요?
